$(function () {
      class index {
            constructor() {
                  this.usermsg = JSON.parse(sessionStorage.getItem("usermsg"));
                  if (this.usermsg !== null) {
                        this.writeUserMsg();
                  }

                  this.bindEvent()
                  new lazyLoad(".moudle2 img")
                  new lazyLoad(".tabsList img")
                  this.loadListData();
                  this.loadfrivoData();
                  this.loadelecData();
                  this.loadsuperData();
                  this.loaddiyData();
                  this.loadnetData()

            }
            bindEvent() {

                  $(".tabsList").on("click", ".citem", (e) => {
                        let id = $(e.target).attr("data-id")
                        this.go(id)
                  })
                  $(".moudle2").on("click", ".citem", (e) => {
                        let id = $(e.target).attr("data-id")
                        this.go(id)

                  })
                  $("#tabs").on("click", "span", (e) => {
                        this.reset();
                        switch ($(e.target).attr("data-id")) {
                              case "105":
                                    $(e.target).toggleClass("guessfirst")
                                    this.elecData()
                                    break;
                              case "7":
                                    $(e.target).toggleClass("guessfirst")
                                    this.frivoData()
                                    break;
                              case "6":
                                    $(e.target).toggleClass("guessfirst")
                                    this.gameData()
                                    break;
                              case "78":
                                    $(e.target).toggleClass("guessfirst")
                                    this.routerData()
                                    break;
                              case "46":
                                    $(e.target).toggleClass("guessfirst")
                                    this.diyData()
                                    break;
                              case "11":
                                    $(e.target).toggleClass("guessfirst")
                                    this.macData()
                                    break;
                        }
                  })

                  // 根据滚动条滚动高度实现右侧固定栏的显示与隐藏
                  $(window).scroll((e) => {
                        this.throttling(this.toggleAttr.bind(this))
                  })
 


                  // 返回顶部
                  $("#fixedfield").on("click", ".grouptop", (e) => {
                        this.pageMove(0)
                  })

                  // 楼梯效果
                  $("#stairs").on("click", "li", (e) => {
                        let id = $(e.target).attr("data-id")
                        switch (id) {
                              case "1":
                                    this.pageMove(1100)
                                    break;
                              case "2":
                                    this.pageMove(1950)
                                    break;
                              case "3":
                                    this.pageMove(2600)
                                    break;
                              case "4":
                                    this.pageMove(3250)
                                    break;
                              case "5":
                                    this.pageMove(3910)
                                    break;
                              case "6":
                                    this.pageMove(4560)
                                    break;
                              case "7":
                                    this.pageMove(6250)
                                    break;
                              case "8":
                                    this.pageMove(6800)
                                    break;
                        }
                  })
                  // 轮播图跳转活动页
                  $(".container1").on("click","img",(e) => {
                        location.href = "./activity.html"
                  })

            }
            pageMove(pagetop) {
                  $("body,html").animate(
                        {
                              scrollTop: pagetop
                        },
                        800
                  );
            }
            toggleAttr(){
                   let scrolltop = $(document).scrollTop()
                        if (scrolltop > 700) {
                              $("#fixedfield").css({
                                    display: "block"
                              })
                        } else {
                              $("#fixedfield").css({
                                    display: "none"
                              })
                        }
                        if (scrolltop > 1000) {
                              $("#stairs").css({
                                    display: "block"
                              })
                        } else {
                              $("#stairs").css({
                                    display: "none"
                              })
                        }
            }
            throttling = (() => {
                  var t = null;
                  return (callback, delay = 200) => {
                        // 如果t不是null那么我们就不允许代码执行; 
                        if (t !== null) {
                              return;
                        }
                        t = setTimeout(function () {
                              // 放入你想要执行的代码; 
                              callback();
                              // 重置t;
                              t = null;
                        }, delay)
                  }
            })();
            rendernet(res) {
                  var $goods = res.data.map(
                        item =>
                              `
                          <div class="citem" data-id=${item.product_id}>
                               <div class="imgsBox" data-id=${item.product_id}>
                                     <img src="${item.img_url}" data-id=${item.product_id}
                                           alt="FX80" />
                               </div>
                               <p class="goodsName" data-id=${item.product_id}>${item.series}</p>
                               <p class="txt" data-id=${item.product_id}>${item.alias}</p>
                               <p class="goodsPrice" data-id=${item.product_id}>
                                     <span class="price" data-id=${item.product_id}>${item.price}</span>
                                     <span class="oldprice" data-id=${item.product_id}>${item.market_price}</span>
                               </p>
                          </div>
                          `
                  ).join("");
                  $(".moudle2 .part6 .rightbox").append($goods)
            }
            renderdiy(res) {
                  var $goods = res.data.map(
                        item =>
                              `
                              <div class="citem" data-id=${item.product_id}>
                              <div class="imgsBox" data-id=${item.product_id}>
                                    <img src="${item.img_url}" data-id=${item.product_id}
                                          alt="FX80" />
                              </div>
                              <p class="goodsName" data-id=${item.product_id}>${item.series}</p>
                              <p class="txt" data-id=${item.product_id}>${item.alias}</p>
                              <p class="goodsPrice" data-id=${item.product_id}>
                                    <span class="price" data-id=${item.product_id}>${item.price}</span>
                                    <span class="oldprice" data-id=${item.product_id}>${item.market_price}</span>
                              </p>
                         </div>
                          `
                  ).join("");
                  $(".moudle2 .part5 .rightbox").append($goods)
            }
            rendersuper(res) {
                  var $goods = res.data.map(
                        item =>
                              `
                              <div class="citem" data-id=${item.product_id}>
                              <div class="imgsBox" data-id=${item.product_id}>
                                    <img src="${item.img_url}" data-id=${item.product_id}
                                          alt="FX80" />
                              </div>
                              <p class="goodsName" data-id=${item.product_id}>${item.series}</p>
                              <p class="txt" data-id=${item.product_id}>${item.alias}</p>
                              <p class="goodsPrice" data-id=${item.product_id}>
                                    <span class="price" data-id=${item.product_id}>${item.price}</span>
                                    <span class="oldprice" data-id=${item.product_id}>${item.market_price}</span>
                              </p>
                         </div>
                          `
                  ).join("");
                  $(".moudle2 .part4 .rightbox").append($goods)
            }
            renderelec(res) {
                  var $goods = res.data.map(
                        item =>
                              `
                              <div class="citem" data-id=${item.product_id}>
                              <div class="imgsBox" data-id=${item.product_id}>
                                    <img src="${item.img_url}" data-id=${item.product_id}
                                          alt="FX80" />
                              </div>
                              <p class="goodsName" data-id=${item.product_id}>${item.series}</p>
                              <p class="txt" data-id=${item.product_id}>${item.alias}</p>
                              <p class="goodsPrice" data-id=${item.product_id}>
                                    <span class="price" data-id=${item.product_id}>${item.price}</span>
                                    <span class="oldprice" data-id=${item.product_id}>${item.market_price}</span>
                              </p>
                         </div>
                          `
                  ).join("");
                  $(".moudle2 .part3 .rightbox").append($goods)
            }
            renderfrivo(res) {
                  var $goods = res.data.map(
                        item =>
                              `
                              <div class="citem" data-id=${item.product_id}>
                              <div class="imgsBox" data-id=${item.product_id}>
                                    <img src="${item.img_url}" data-id=${item.product_id}
                                          alt="FX80" />
                              </div>
                              <p class="goodsName" data-id=${item.product_id}>${item.series}</p>
                              <p class="txt" data-id=${item.product_id}>${item.alias}</p>
                              <p class="goodsPrice" data-id=${item.product_id}>
                                    <span class="price" data-id=${item.product_id}>${item.price}</span>
                                    <span class="oldprice" data-id=${item.product_id}>${item.market_price}</span>
                              </p>
                         </div>
                          `
                  ).join("");
                  $(".moudle2 .part2 .rightbox").append($goods)
            }
            render(res) {
                  var $goods = res.data.map(
                        item =>
                              `
                              <div class="citem" data-id=${item.product_id}>
                              <div class="imgsBox" data-id=${item.product_id}>
                                    <img src="${item.img_url}" data-id=${item.product_id}
                                          alt="FX80" />
                              </div>
                              <p class="goodsName" data-id=${item.product_id}>${item.series}</p>
                              <p class="txt" data-id=${item.product_id}>${item.alias}</p>
                              <p class="goodsPrice" data-id=${item.product_id}>
                                    <span class="price" data-id=${item.product_id}>${item.price}</span>
                                    <span class="oldprice" data-id=${item.product_id}>${item.market_price}</span>
                              </p>
                         </div>
                         `
                  ).join("");
                  $(".tabsList").append($goods)
                  $(".moudle2 .part1 .rightbox").append($goods)
            }

            reset() {
                  $("#tabs .tabsItem span").removeClass("guessfirst")
            }

            loadListData() {
                  let options = {
                        url: "http://localhost:3000/static/data/game1.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.render(res.data);
                        });
            }
            loadfrivoData() {
                  let options = {
                        url: "http://localhost:3000/static/data/frivolous2.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderfrivo(res.data)
                        });
            }
            loadelecData() {
                  let options = {
                        url: "http://localhost:3000/static/data/electronic3.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderelec(res.data)
                        });
            }
            loadsuperData() {

                  let options = {
                        url: "http://localhost:3000/static/data/super4.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.rendersuper(res.data)
                        });
            }
            loaddiyData() {
                  let options = {
                        url: "http://localhost:3000/static/data/accessories5.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderdiy(res.data)
                        });
            }
            loadnetData() {
                  let options = {
                        url: "http://localhost:3000/static/data/network6.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.rendernet(res.data)
                        });
            }

            diyData() {
                  let options = {
                        url: "http://localhost:3000/static/data/accessories5.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderel(res.data)
                        });
            }
            macData() {

                  let options = {
                        url: "http://localhost:3000/static/data/machine.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderel(res.data)
                        });
            }
            routerData() {
                  let options = {
                        url: "http://localhost:3000/static/data/router.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderel(res.data)
                        });
            }
            gameData() {
                  let options = {
                        url: "http://localhost:3000/static/data/game1.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderel(res.data)
                        });
            }
            frivoData() {
                  let options = {
                        url: "http://localhost:3000/static/data/frivolous2.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderel(res.data)
                        });
            }
            elecData() {
                  let options = {
                        url: "http://localhost:3000/static/data/electronic3.json"
                  }
                  axios(options)
                        .then((res) => {
                              this.data = res.data
                              this.renderel(res.data)
                        });
            }

            writeUserMsg() {
                  $(".right-login1").css({
                        display: "none"
                  })
                  $(".right-login2").css({
                        display: "inline-block"
                  })
                  $("#login-n").html(this.usermsg.username)
                  $("#index-login").html(this.usermsg.username)
            }

            go(id) {
                  location.href = "./details.html#id=" + id;
            }
            renderel(res) {
                  var $goods = res.data.map(
                        item =>
                              `
                          <div class="citem" data-id=${item.product_id}>
                               <div class="imgsBox"  data-id=${item.product_id}>
                                     <img src="${item.img_url}"  data-id=${item.product_id}
                                           alt="FX80" />
                               </div>
                               <p class="goodsName"  data-id=${item.product_id}>${item.series}</p>
                               <p class="txt"  data-id=${item.product_id}>${item.alias}</p>
                               <p class="goodsPrice"  data-id=${item.product_id}>
                                     <span class="price"  data-id=${item.product_id}>${item.price}</span>
                                     <span class="oldprice"  data-id=${item.product_id}>${item.market_price}</span>
                               </p>
                          </div>
                          `
                  ).join("");
                  $(".tabsList").html($goods)
            }

      }
      new index
})
